<template>
  <div>
    <!-- 面包屑导航区 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/publish' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>上传内容</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片视图区域 -->
    <el-card>
      <el-form
        ref="formData"
        :rules="rules"
        :model="formData"
        label-width="80px"
      >
        <!-- 标题 -->
        <el-form-item label="标题" prop="title">
          <el-input v-model="formData.title"></el-input>
        </el-form-item>
        <!-- 上传图片 -->
        <!-- :auto-upload="false" -->
        <el-form-item label="上传图片" prop="fileList">
          <el-upload
            action="http://example-chongqing.oss-cn-beijing.aliyuncs.com"
            :data="dataObj"
            :limit="9"
            :on-exceed="showExceed"
            list-type="picture-card"
            :file-list="formData.fileList"
            :on-remove="toRemove"
            ref="upload"
            :multiple="false"
            :before-upload="beforeAvatarUpload"
            :on-success="handleAvatarSuccess"
          >
            <!-- :on-change="pushFile" -->
            <i slot="default" class="el-icon-plus"></i>
            <div slot="file" slot-scope="{ file }">
              <img
                class="el-upload-list__item-thumbnail"
                :src="file.url"
                alt=""
              />
              <span class="el-upload-list__item-actions">
                <span
                  class="el-upload-list__item-preview"
                  @click="checkPictureCardPreview(file)"
                >
                  <i class="el-icon-zoom-in"></i>
                </span>
                <span
                  v-if="!disabled"
                  class="el-upload-list__item-delete"
                  @click="toRemove(file)"
                >
                  <i class="el-icon-delete"></i>
                </span>
              </span>
            </div>
          </el-upload>
          <el-dialog :visible.sync="pictureVisible">
            <img width="100%" :src="pictureImageUrl" alt="" />
          </el-dialog>
        </el-form-item>
        <!-- 内容 -->
        <el-form-item label="内容" minlength="200" prop="desc" :rows="6">
          <el-input
            type="textarea"
            class="text-area"
            v-model="formData.desc"
            show-word-limit
          ></el-input>
          <span></span>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  name: "picUpload",
  data() {
    return {
      formData: {
        title: "阿达萨达",
        fileList: [],
        desc: "阿达萨达撒大所大所大所大所大所大所大所大所大所多",
      },
      imageUrl: "",
      pictureImageUrl: "",
      pictureVisible: false,
      disabled: false,
      rules: {
        title: [
          { required: true, message: "请输入标题", trigger: "blur" },
          {
            min: 3,
            max: 10,
            message: "长度在 3 到 10 个字符",
            trigger: "blur",
          },
        ],
        fileList: [{ required: true, message: "请上传图片", trigger: "blur" }],
        desc: [
          { required: true, message: "请输入内容", trigger: "blur" },
          { min: 1, max: 200, message: "字数至少200字！", trigger: "blur" },
        ],
      },
      dataObj: {
        policy: "",
        signature: "",
        key: "",
        ossaccessKeyId: "",
        dir: "",
        host: "",
      },
    };
  },
  methods: {
    // 限制上传图片张数
    showExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择 9 个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    // 上传之前事件
    beforeAvatarUpload(file) {
      console.log(file);
      // console.log(res);
      return new Promise((resolve, reject) => {
        console.log(reject);
        console.log(this.dataObj);
        this.$http
          .post("http://192.168.1.52/mini/index.php/kind", { road: "one" })
          .then((res) => {
            console.log(res);
            this.dataObj.policy = res.body.result.policy;
            this.dataObj.signature = res.body.result.signature;
            this.dataObj.ossaccessKeyId = res.body.result.accessid;
            this.dataObj.dir = res.body.result.dir;
            this.dataObj.host = res.body.result.host;
            this.dataObj.key = res.body.result.dir + file.name;
            resolve(true);
          });
      });
    },
    // 成功后的事件
    handleAvatarSuccess(res, file) {
      this.imageUrl = this.dataObj.host + "/" + this.dataObj.key;
      this.formData.fileList.push(file);
      console.log(res, file);
      console.log(this.imageUrl);
      this.$message.success("上传成功！");
    },
    // 移除照片
    toRemove(file, fileList) {
      // let self = this;
      this.formData.fileList = fileList;
      if (file && file.status === "success") {
        let fileList = this.$refs.upload.uploadFiles;
        console.log(fileList);
        let index = fileList.findIndex((fileItem) => {
          return fileItem.uid === file.uid;
        });
        console.log(index);
        fileList.splice(index, 1);
      }
    },
    // Preview事件
    checkPictureCardPreview(file) {
      let self = this;
      self.pictureImageUrl = file.url;
      self.pictureVisible = true;
    },
    // 提交
    onSubmit() {
      let self = this;
      console.log(self.formData);
      // 再次验证
      self.$refs.formData.validate(async (valid) => {
        if (valid) {
          const res = await self.$get("/slide/create", {
            title: self.formData.title,
            cover: self.imageUrl,
            content: self.formData.desc,
          });
          console.log(res);
          self.$message.success("创建成功！");
        } else {
          setTimeout(() => {
            alert("请填写");
          }, 1000);
          return false;
        }
      });
    },
  },
};
</script>

<style lang="scss">
</style>